<route>
    {
        meta: {
            layout: 'index',
            title:'公司管理'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="onSearch()" />
            <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="add">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>
        <a-table :columns="columns" :data-source="dataSource">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'state'">
                    <a-tag color="green">{{ text }}</a-tag>
                </template>

                <template v-if="column.dataIndex === 'action'">
                    <div style="margin-right: 8px;">
                        <span v-if="editableData[record.id]">
                            <a-button type="link" @click="save(record.id)">保存 </a-button>
                            <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                <a-button type="link">取消</a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                        <span v-else>
                            <a-button type="link" @click="addItem(record.id)">
                                <PlusOutlined />
                            </a-button>
                            <a-button type="link" @click="editItem(record)">
                                <FormOutlined />
                            </a-button>
                            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                <a-button type="link" danger>
                                    <DeleteOutlined />
                                </a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>

        <AntdConfirmModal :title='title ? "新增子公司" : "修改信息"' ref="modalRef" width="600px" :keepSlot="false"
            @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="全称" name="fullName" :rules="[{ required: true, message: '请输入全称' }]">
                            <a-input v-model:value="form.fullName" style="width: 400px;" placeholder="请输入全称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="编码" name="code" :rules="[{ required: true, message: '请输入编码' }]">
                            <a-input v-model:value="form.code" style="width: 400px;" placeholder="请输入编码" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="简称" name="shortName">
                            <a-input v-model:value="form.shortName" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="状态" name="state">
                            <a-switch v-model:checked="form.state" checked-children="启用" un-checked-children="禁用" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="排序" name="order">
                            <a-input-number v-model:value="form.order" style="width: 400px;" controls-position="right"
                                :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="创建时间" name="createDate">
                            <a-input v-model:value="form.createDate" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="描述" name="description">
                            <a-input v-model:value="form.description" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { companyList } from './data'
const editableData = reactive({});
const dataSource = ref(companyList);
const form = ref({
    fullName: '',
    code: '',
    shortName: '',
    state: true,
    order: 0,
    description: '',
});
const title = ref(null);
const modalRef = ref(null);
const columns = [
    {
        title: '全称',
        dataIndex: 'fullName',
        key: 'fullName',
    },
    {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
    },
    {
        title: '简称',
        dataIndex: 'shortName',
        key: 'shortName',
    },
    {
        title: '状态',
        dataIndex: 'state',
        key: 'state',
    },
    {
        title: '排序',
        dataIndex: 'order',
        key: 'order',
    },

    {
        title: '创建时间',
        dataIndex: 'createDate',
        key: 'createDate',
    },
    {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];
//编辑
function editItem(e) {
    form.value = e
    title.value = false
    modalRef.value.openModal()
}
// 删除
const del = key => {
    delete editableData[key];
}
// 保存
const save = key => {
    delete editableData[key];
};
// 取消
const cancel = key => {
    delete editableData[key];
};
// 新增
function addItem() {
    title.value = true
    form.value = {}
    modalRef.value.openModal()
}
function add() {
    title.value = true
    form.value = {}
    modalRef.value.openModal()
}
// 提交
function submitForm() {

}
// 搜索
function onSearch() {

}
</script>